<template>
  <div>
    <el-radio-group v-model="userStore.isClose" style="margin-bottom: 20px">
      <el-radio-button @click="change(userStore.isClose)" :value="false"
        >展开</el-radio-button
      >
      <el-radio-button @click="change(userStore.isClose)" :value="true"
        >关闭</el-radio-button
      >
    </el-radio-group>
  </div>
</template>

<script setup lang="ts">
import { useIsClose } from "@/composables/userStore";
import { debounce } from "@/utils/debounce";
const userStore = useIsClose();
function change(val: any) {
  userStore.change(val);
}
onMounted(() => {
  //这是针对页面初始化的情况
  let width = window.innerWidth;
  if (width < 800) {
    userStore.change(false);
  } else {
    userStore.change(true);
  }
  function fn() {
    if (document.documentElement.offsetWidth < 800) {
      userStore.change(false);
    } else {
      userStore.change(true);
    }
  }
  //检查窗口大小变化
  window.onresize = debounce(fn, 500);
});
</script>

<style scoped></style>
~/utils/debounce
